body {
font-family: 'Raleway', sans-serif;	
}

.header-title, .crafty-title{
font-family: 'Satisfy', cursive;
}

.lighten-1  {
background-color:rgba(0, 38, 77, 0.9)	 !important;		
}

.menu-icons{
font-size:30px !important;
color:white !important;
}

#download-button{
margin-top:25px;
}

.header-banner{
height:800px;	
background-image: url("../img/background2.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-60px;
}

.header-container{
margin-top:	250px;
}

.header-index-sombre{
background-color:rgba(0, 38, 77, 0.8);	
height: 800px;
}

.waves-light{
background-color:rgba(0, 38, 77, 0.9)!important;
border : 3px white solid;		
}

#porfolio,#features,#contact,#intro{
width:100%;	
}

.col-icon{
margin-top:30px;	
padding:30px;
background-color:rgba(255, 255, 255, 0.9);
}

.col-icon h5{
border-bottom: 2px rgba(0, 38, 77, 0.5) solid;
padding-bottom: 35px;
margin-bottom: 35px;
margin-top:-10px;
}

.container-icon,.portfolio-container,.intro-container{
max-width:1124px !important;
margin:4% auto;
}

.material-icons{
font-size:60px;
color:rgba(0, 38, 77, 0.8);	
}

.parallax-img{
background-image: url("../img/background1.jpg");
} 

.parallax-container .section {
 width: 100%;
}

.parallax-container {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
}

#index-sombre{
background-color:rgba(50, 50, 50, 0.5);
color:white!important;
padding:100px;
}

.row{
width:100%;
margin:auto;
}

#porfolio{
background:#ffffff;
border-top:#ededed 10px solid;
}

#porfolio h2{
font-size:40px;
}

.loupe-icons{
color:#ffffff;	
}

.page-footer{
background-color:rgba(0, 38, 77, 0.8) !important;	
}
.intro{
padding:30px;	
}

.row-projets{
margin-top:50px;
}

#col-projets1,#col-projets2, #col-projets3, #col-projets4{
width:50%;	
padding:0;
}

#col-projets1 img,#col-projets2 img,#col-projets3 img, #col-projets4 img{
width:110%;		
}

#col-projets-descr1 h4, #col-projets-descr2 h4,#col-projets-descr3 h4{
font-size:30px;
}

#col-projets-descr1, #col-projets-descr2,#col-projets-descr3{
padding:50px;
}

#col-projets-descr1 p,  #col-projets-descr2 p,#col-projets-descr3 p{
padding:30px 22px !important;
margin-top:25px!important;
border-top:1px #777 solid;
}

.form-container{
max-width:900px !important;
margin:4% auto;
background-color:rgba(255, 255, 255, 0.9);
padding:20px 80px 50px;
}

#index-contact label{
color:black!important;
font-size:20px;
}

#index-contact input{
color:black!important;
font-size:20px;
}

.contact-title{
font-size:40px;
color:black;	
}

.form-sombre{
width:100%;	
background-color:rgba(0, 38, 77, 0.8);	
color:white!important;
padding:100px;
}

@media only screen and (max-width : 1024px) {

	#col-features1,#col-features2,#col-features3{	
	width:50%!important;	
	}
	
	#col-projets-descr1, #col-projets-descr2,  #col-projets-descr3{
	padding:25px;
	}
}


@media only screen and (max-width : 900px) {

	#col-projets-descr1, #col-projets-descr2,  #col-projets-descr3{
	padding:12px;
	}
}



@media only screen and (max-width : 800px) {
	#index-sombre{
	padding:50px;
	}
	
	#col-projets-descr1, #col-projets-descr2,  #col-projets-descr3, #col-projets1,#col-projets2,#col-projets3{
	width:100%;
	margin-top:15px;
	}
	
	#col-features1,#col-features2,#col-features3{	
	width:100%!important;	
	}
	
	.form-container{
		width:90%!important;
		margin:8% 5% 8%;
		padding:10px 50px 20px;
	}
	
	.form-sombre{
	padding:100px 10px;
	}
}

@media only screen and (max-width : 500px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:25px;
	}
	
	.form-container{
		width:100%!important;
		margin:0!important;
	}
	
	.form-sombre{
	padding:120px 10px;
	}
}


@media only screen and (max-width : 300px) {

	.hovereffect:hover h5,.hovereffect:hover a.info {
	margin-top:12px;
	}
	
}

@media  screen and (min-width: 1419px) {
	 .header-banner h1{	
	margin-top:320px;	
	}

	.header-banner,.header-index-sombre{
	height:900px;
	}
}

@media  screen and (min-width: 1919px) {
	.header-banner h1{	
	margin-top:430px;	
	}

	.header-banner,.header-index-sombre{
	height:1120px;
	}  
}